<template>
    <el-cascader v-model="ids" :options="options" :props="props" v-bind="$attrs" style="width: 100%" :placeholder="placeholder" @change="change" />
</template>

<script>
import { MaintenanceProjectConfigModel } from '@/models'

export default {
    name: 'ProjectSelect',
    props: {
        value: {
            type: Array,
            default: () => ([])
        },
        placeholder: {
            type: String,
            default: '请选择'
        }
    },
    data() {
        return {
            model: new MaintenanceProjectConfigModel(),
            ids: this.value,
            options: [],
            props: {
                value: 'id',
                label: 'name'
            }
        }
    },
    watch: {
        value(newValue) {
            this.ids = newValue
        }
    },
    created() {
        this.getList()
    },
    methods: {
        change(val) {
            this.$emit('update:value', val)
            this.$emit('change', val, this.options)
        },
        getList() {
            this.model.getList({ pageSize: 1000 }).then(res => {
                console.log(res)
                this.options = res.list
            })
        }
    },
}
</script>

<style lang="scss" scoped>

</style>
